@extends('admin.common.web')

@section('title','角色权限分配')

@section('style')
    <style>
        .child_item{
            margin-left: 40px;
        }
        .child {
            display: flex;
            list-style: none;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .child li {
            margin-right: 5px;
        }

        .child li:last-child {
            flex-wrap: wrap;
        }

        .role_name{
            font-size: 18px;
        }

        .role_name span{
            color: #ff0000;
        }


    </style>
@endsection

@section('content')
    <!-- Page Content -->
    <!-- Page Breadcrumb -->
    <div class="page-breadcrumbs">
        <ul class="breadcrumb">
            <li>
                <a href="{{ route('admin.index.index') }}">系统</a>
            </li>
            <li>
                <a href="{{ route('admin.role.index') }}">角色管理</a>
            </li>
            <li class="active">角色权限分配</li>
        </ul>
    </div>
    <!-- /Page Breadcrumb -->
    <!-- Page Body -->
    <div class="page-body">

        <div class="row">
            <div class="col-lg-12 col-sm-12 col-xs-12">
                <div class="widget">
                    <div class="widget-header bordered-bottom bordered-blue">
                        <span class="widget-caption">权限分配</span>
                    </div>
                    <div class="widget-body">
                        @include('admin.common.msg')
                        @include('admin.common.error')
                        <form action="{{ route('admin.role.updatePermission') }}" method="post">
                            @csrf
                            <div class="role_name">
                                角色名
                                <span>{{ $role['role_name'] }}</span>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" class="choose_all colored-danger">
                                    <span class="text">全选</span>
                                </label>
                            </div>

                            @foreach($permissionList as $v)
                            <div class="parent">
                                <label>
                                    <input type="checkbox" class="parent_input colored-danger">
                                    <span class="text">{{ $v['permission_name'] }}</span>
                                </label>

                                <ul class="child">
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员列表d1</span>
                                        </label>
                                    </li>
                                </ul>

                                <div class="parent child_item">
                                    <label>
                                        <input type="checkbox" class="parent_input colored-danger">
                                        <span class="text">管理员管理2</span>
                                    </label>

                                    <ul class="child">
                                        <li>
                                            <label>
                                                <input type="checkbox" class="child_chk colored-blue">
                                                <span class="text">管理员列表21</span>
                                            </label>
                                        </li>

                                    </ul>
                                    <div class="parent child_item">
                                        <label>
                                            <input type="checkbox" class="parent_input colored-danger">
                                            <span class="text">管理员管理3</span>
                                        </label>
                                        <ul class="child">
                                            <li>
                                                <label>
                                                    <input type="checkbox" class="child_chk colored-blue">
                                                    <span class="text">管理员列表31</span>
                                                </label>
                                            </li>
                                        </ul>
                                        <div class="parent child_item">
                                            <label>
                                                <input type="checkbox" class="parent_input colored-danger">
                                                <span class="text">管理员管理4</span>
                                            </label>
                                            <ul class="child">
                                                <li>
                                                    <label>
                                                        <input type="checkbox" class="child_chk colored-blue">
                                                        <span class="text">管理员列表41</span>
                                                    </label>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                           {{-- <div class="parent">
                                <label>
                                    <input type="checkbox" class="parent_input colored-danger">
                                    <span class="text">管理员管理</span>
                                </label>
                                <ul class="child">
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员列表</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员添加界面</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员添加操作</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员修改界面</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理与修改操作</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员角色分配测试</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员角色分配测试发放大</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员角色分配测试发放大</span>
                                        </label>
                                    </li>
                                    <li>
                                        <label>
                                            <input type="checkbox" class="child_chk colored-blue">
                                            <span class="text">管理员角色分配测试发放大</span>
                                        </label>
                                    </li>
                                    <li>
                                        <div class="parent">
                                            <label>
                                                <input type="checkbox" class="parent_input colored-danger">
                                                <span class="text">管理员管理</span>
                                            </label>
                                            <ul class="child">
                                                <li>
                                                    <label>
                                                        <input type="checkbox" class="child_chk colored-blue">
                                                        <span class="text">管理员列表</span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label>
                                                        <input type="checkbox" class="child_chk colored-blue">
                                                        <span class="text">管理员添加界面</span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label>
                                                        <input type="checkbox" class="child_chk colored-blue">
                                                        <span class="text">管理员添加操作</span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label>
                                                        <input type="checkbox" class="child_chk colored-blue">
                                                        <span class="text">管理员修改界面</span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label>
                                                        <input type="checkbox" class="child_chk colored-blue">
                                                        <span class="text">管理与修改操作</span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label>
                                                        <input type="checkbox" class="child_chk colored-blue">
                                                        <span class="text">管理员角色分配测试</span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <label>
                                                        <input type="checkbox" class="child_chk colored-blue">
                                                        <span class="text">管理员角色分配测试发放大</span>
                                                    </label>
                                                </li>
                                                <li>
                                                    <div class="parent">
                                                        <label>
                                                            <input type="checkbox" class="parent_input colored-danger">
                                                            <span class="text">管理员管理</span>
                                                        </label>
                                                        <ul class="child">
                                                            <li>
                                                                <label>
                                                                    <input type="checkbox" class="child_chk colored-blue">
                                                                    <span class="text">管理员列表</span>
                                                                </label>
                                                            </li>
                                                            <li>
                                                                <label>
                                                                    <input type="checkbox" class="child_chk colored-blue">
                                                                    <span class="text">管理员添加界面</span>
                                                                </label>
                                                            </li>
                                                            <li>
                                                                <label>
                                                                    <input type="checkbox" class="child_chk colored-blue">
                                                                    <span class="text">管理员添加操作</span>
                                                                </label>
                                                            </li>
                                                            <li>
                                                                <label>
                                                                    <input type="checkbox" class="child_chk colored-blue">
                                                                    <span class="text">管理员修改界面</span>
                                                                </label>
                                                            </li>
                                                            <li>
                                                                <label>
                                                                    <input type="checkbox" class="child_chk colored-blue">
                                                                    <span class="text">管理与修改操作</span>
                                                                </label>
                                                            </li>
                                                            <li>
                                                                <label>
                                                                    <input type="checkbox" class="child_chk colored-blue">
                                                                    <span class="text">管理员角色分配测试</span>
                                                                </label>
                                                            </li>
                                                            <li>
                                                                <label>
                                                                    <input type="checkbox" class="child_chk colored-blue">
                                                                    <span class="text">管理员角色分配测试发放大</span>
                                                                </label>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>--}}

                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" class="btn btn-default">保存信息</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- /Page Body -->
@endsection
@section('script')
    <script type="text/javascript">
        $(() => {
            //父级选中
            $('.parent_input').click(function () {
                if ($(this).is(':checked')) {
                    //选择当前节点的父节点所有的下级checkbox
                    $(this).parent().parent('.parent').find('input[type=checkbox]').prop('checked',true);

                    //把他们都变成选中状态
                    // $.each(ip, function (k, v) {
                    //     $(this).prop('checked', true);
                    // })

                    //获得所有的父元素
                    let parent = $(this).parents('.parent').find('> label > input');
                    //把他们都变成选中状态
                    $.each(parent, function (k, v) {
                        $(this).prop('checked', true);
                    })
                } else {
                    //选择当前节点的父节点所有的下级checkbox
                    $(this).parent().parent('.parent').find('input[type=checkbox]').prop('checked',false);

                    //取消他们都选中状态
                    // $.each(ip, function (k, v) {
                    //     $(this).prop('checked', false);
                    // })

                    //判断自己的上级父节点是否有选中的，如果下级父节点下面没有一个选中的，那么，这个父节点也不选中
                    let prevParent= $(this).parents('.parent');

                    $.each(prevParent,function(k,v){
                        //当前选择器下的子级
                        let chk_input = $(this).children('.child').find('input[type=checkbox]:checked');
                        //下级权限
                        let chk_child_input = $(this).children('.child_item').find('input[type=checkbox]:checked');

                        if(chk_input.length == 0 && chk_child_input.length == 0){
                            $(this).find('>label > input').prop('checked',false);
                        }
                    })
                }
            })

            //子级选中
            $('.child_chk').click(function () {
                if($(this).is(':checked')){
                    $(this).parents('.parent').find('> label > input').prop('checked',true);
                }else{
                    //获得我所有的父级
                    let my_parents = $(this).parents('.parent');
                    //如果父级中，如果其子级中，没有选中的，就关闭它
                    $.each(my_parents,function(k,v){
                        let chk_input = $(this).find('input[type=checkbox]:checked');
                        //等于1 说明的直接找到了那个parent的节点
                        if(chk_input.length == 1){
                            $(this).find('>label > input').prop('checked',false);
                        }
                    })
                }
            })

            //全选
            $('.choose_all').click(function () {
                if($(this).is(':checked')){
                    let parent_input = $(this).parent().parent().nextAll('.parent');
                    console.log(parent_input);
                    $.each(parent_input,function(k,v){
                        $(this).find('input[type=checkbox]').prop('checked',true);
                    })
                }else{
                    let parent_input = $(this).parent().parent().nextAll('.parent');

                    $.each(parent_input,function(k,v){
                        $(this).find('input[type=checkbox]').prop('checked',false);
                    })
                }
            })
        })

    </script>
@endsection
